<template>
  <div class="air-info">
    <div class="air-title">
      <div class="air-name">{{ airportName }}</div>
    </div>
    <div class="air-param">
      <p v-for="(item, index) in paramList" :key="index" class="param-list">
        <img class="param-icon" :src="item.src">
        <span class="param-value">{{ item.value }}</span>
        <span class="param-unit">{{ item.name }}</span>
      </p>
    </div>
    <div class="air-status" :class="statusClass">
      <!-- <i class="status-color" /> -->
      {{ airportStatus || "在线" }}
    </div>
    <div class="air-equipment" :title="equipment">
      {{ equipment || "高清相机/多光谱相机/喊话器" }}
    </div>
    <div class="air-video">
      <VideoPlayer ref="vRef" style="height: 133px;width: 391px;" :options="getVideoOptions" />
    </div>
    <!-- <div class="switch-video">
      <span
        v-for="(item, index) in videoList"
        :key="index"
        class="switch-btn"
        :class="inOrOut === item.id ? 'is--checked' : ''"
        @click="selectVideo(item)"
      >{{ item.label }}</span>
    </div> -->
    <div class="switch-video">
      <div class="text">
        {{ currentVideo?.label }}
      </div>
      <div class="btns">
        <div v-for="item in btnList" :key="item.id" class="btn" :title="item.title" @click="handleViedeoBtn(item.id)">
          <img :src="item.src" alt="">
        </div>
      </div>
    </div>

    <span class="close-info" @click="hideAirInfo" />
  </div>
</template>
<script>

import { ref, reactive, toRefs, watch, computed, watchEffect } from 'vue'
import imagesMap from '@/components/BaseMap/tools/gisImage.js'
import { getAirportDetail } from '@/api/dashboard/index.js'
import VideoPlayer from '@/components/VideoPlayer/index.vue'

export default {
  name: 'AirInfo',
  components: { VideoPlayer },
  props: {
    info: {
      type: Object,
      default: () => { }
    }
  },
  emits: ['hide'],
  setup(props, { emit }) {
    const data = reactive({
      videoList: [
        { id: 'in', label: '内部画面', url: null },
        { id: 'out', label: '外部画面', url: null }
      ],
      // 默认展示内部画面
      inOrOut: 'in',
      currentVideo: null,
      playUrl: null,
      paramList: [
        { id: 'wspd', src: imagesMap['wind'], value: null, name: '风速' },
        // { id: 'wdir', src: imagesMap['north'], value: null, name: '风向' },
        { id: 'hpa', src: imagesMap['atmosPressure'], value: null, name: '大气压力' },
        { id: 'hum', src: imagesMap['airHumidity'], value: null, name: '空气湿度' },
        { id: 'rainfull', src: imagesMap['rainfall'], value: null, name: '降雨量' },
        { id: 'tmp', src: imagesMap['airTemperature'], value: null, name: '空气温度' }],
      btnList: [
        { id: 'change', src: imagesMap['viedeoChange'], title: '切换' },
        { id: 'fullScreen', src: imagesMap['videoFullScreen'], title: '全屏' },
        { id: 'refresh', src: imagesMap['videoRefresh'], title: '刷新' }
      ],
      airportStatus: null,
      airportName: null,
      statusClass: null,
      equipment: null
    })

    // const getVideoOptions = computed(() => {
    //   return {
    //     videoUrl: data.currentVideo.url,
    //     videoTitle: null,
    //     live: true
    //   }
    // })
    const getVideoOptions = computed(() => {
      return {
        videoUrl: data.playUrl,
        videoTitle: null,
        live: true
      }
    })

    watch(() => props.info, (value) => {
      if (JSON.stringify(value) !== '{}') {
        data.inOrOut = 'in'
        data.playUrl = null
        if (value !== null) {
          data.airportName = value?.name || null
          if (value?.status === 1) {
            data.airportStatus = '空闲'
            data.statusClass = 'free'
          } else if (value?.status === 2) {
            data.airportStatus = '飞行中'
            data.statusClass = 'busy'
          }
          if (value?.id) {
            getAirportDetail(value?.id).then(res => {
              // if (res.code === 0) {
              //   data.paramList.map((item) => {
              //     for (const key in res?.data) {
              //       if (item.id === key) {
              //         item.value = res?.data[key] || '--'
              //       }
              //     }
              //   })
              // }
              // data.equipment = res.data.mountName
              const equipmentNameList = []
              if (res.data.mountEquipmentList.length > 0) {
                res.data.mountEquipmentList.forEach(e => {
                  equipmentNameList.push(e.name)
                })
              }
              data.equipment = equipmentNameList.join('/')
              data.paramList.forEach(e => {
                e.value = res.data[e.id]
              })
            })
          }
          if (value?.internalMonitorUrl || value?.externalMonitorUrl) {
            // data.playUrl = value?.internalMonitorUrl
            data.playUrl = value?.internalMonitorUrl
            data.videoList.map((item) => {
              if (item.id === 'in') {
                item.url = value?.internalMonitorUrl || null
              } else {
                item.url = value?.externalMonitorUrl || null
              }
            })
          }
        }
      }
    })
    watchEffect(() => {
      data.playUrl = data.inOrOut === 'in' ? props.info?.internalMonitorUrl : props.info?.externalMonitorUrl
    })

    const hideAirInfo = () => {
      data.playUrl = null
      emit('hide')
    }

    const selectVideo = (val) => {
      data.inOrOut = val.id
      data.playUrl = val?.url
    }

    const vRef = ref()
    function handleViedeoBtn(type) {
      if (type === 'change') {
        data.inOrOut = data.inOrOut === 'in' ? 'out' : 'in'
        const current = data.videoList.filter(video => video.id === data.inOrOut)
        data.currentVideo = current[0]
        data.playUrl = data.currentVideo?.url
        return
      }
      vRef.value.handleCustom(type)
    }
    // watchEffect(() => {

    // })

    // ;

    return {
      ...toRefs(data),
      selectVideo,
      getVideoOptions,
      hideAirInfo,
      handleViedeoBtn,
      vRef
    }
  }
}
</script>

<style lang="scss" scoped>
.air-info {
  width: 604px;
  height: 563px;
  // background: #222222;
  background: url("@/assets/gis/airInfoBackground.png") no-repeat;
  background-size: 604px 563px;
  position: relative;

  .close-info {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    float: right;
    color: #fff;
    cursor: pointer;
    position: absolute;
    right: 25px;
    top: 15px;
  }

  .air-title {
    width: 100%;
    height: 30px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #f1f1f1;
    line-height: 22px;

    .air-name {
      width: 275px;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      float: left;
      color: #fff;
      padding-left: 13px;
      position: relative;
      top: 113px;
      left: 180px;
    }

    .busy {
      color: #f00;

      i {
        background-color: #f00;
      }
    }

    .free {
      color: #00b42a;

      i {
        background-color: #00b42a;
      }
    }
  }

  .air-status {
    width: 60px;
    height: 30px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #f1f1f1;
    line-height: 22px;
    position: relative;
    top: 140px;
    left: 195px;
  }

  .air-param {
    width: 490px;
    height: 111px;
    // border-radius: 3px 3px 3px 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 5px;
    position: relative;
    left: 46px;
    top: 120px;

    .param-list {
      width: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .param-icon {
        width: 26px;
        height: 26px;
      }

      .param-value {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #f1f1f1;
        line-height: 22px;
      }

      .param-unit {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #f1f1f1;
        line-height: 22px;
        opacity: 0.5;
      }
    }
  }

  .air-equipment {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #f1f1f1;
    line-height: 22px;
    position: relative;
    left: 190px;
    top: 157px;
    width: 350px;
    overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
  }

  .air-video {
    width: 291px;
    height: 160px;
    // background: #d8d8d8;
    position: relative;
    left: 166px;
    top: 173px;
  }

  .switch-video {
    width: 65%;
    height: 30px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #f1f1f1;
    line-height: 22px;
    position: relative;
    left: 166px;
    top: 146px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;

    .btns {
      display: flex;
      align-items: center;

      .btn {
        width: 20px;
        height: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    // .switch-btn {
    //   width: 64px;
    //   height: 28px;
    //   line-height: 28px;
    //   display: inline-block;
    //   color: #fff;
    //   cursor: pointer;
    //   text-align: center;
    //   margin: 0 5px;
    // }
    // .is--checked {
    //   color: #000;
    //   background-color: #d8d8d8;
    // }
  }
}</style>

